import React from 'react';
import { useIntl } from 'umi';
import Styles from './PowerView.less';
// 定义状态文字的类型，可以是数字或字符串
type StatusValue = React.ReactNode;
// 定义每个状态的对象类型
export interface PowerStatus {
  icon?: React.ReactNode;
  title?: string;
  value?: StatusValue;
  unit?: string;
}

// 定义 PowerView 组件的 props 接口
interface PowerViewProps {
  statuses?: PowerStatus[];
}

export const PowerView: React.FC<PowerViewProps> = ({ statuses }) => {
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';
  return (
    <div className={Styles.powerView}>
      {statuses?.map((status, index) => (
        <div
          className={`${Styles.powerStatus} ${isEnglish ? Styles.powerStatusEn : ''}`}
          key={index}
        >
          {status.icon}
          <div className={Styles.powerTextWrap}>
            <div className={Styles.powerTitle}>{status.title}</div>
            <div className={Styles.powerValue}>
              {status.value}
              <span className={Styles.powerUnit}>{status.unit}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
